<template>
  <div class="layout">
    <MyHeader></MyHeader>
    <div class="aside">
      <div class="aside-inner">
        <p class="aside-title">系统菜单</p>
        <MyAside></MyAside>
      </div>
    </div>
    <div class="content">
      <div class="content-inner">
        <MyBreadcrumb></MyBreadcrumb>
        <router-view/>
      </div>
    </div>
    <div class="footer">
    </div>
  </div>
</template>
<script>
  import MyHeader from './header'
  import MyAside from './myaside'
  import MyBreadcrumb from '../breadcrumb'

  export default {
    data() {
      return {}
    },
    methods: {},
    computed: {
      userName: () => {
        return handleUserInfo({userInfo: 'userInfo', type: 'get'})
      }
    },
    created() {
    },
    components: {
      MyHeader,
      MyAside,
      MyBreadcrumb
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  * {
    box-sizing: border-box;
  }

  .layout {
    height: 100%;
  }

  .aside {
    float: left;
    width: @layout1AsideWidth;
    height: 100%;
    padding-top: @layout1HeaderHeight;
    margin-top: -@layout1HeaderHeight;
    .aside-inner {
      height: 100%;
      .aside-title {
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #ddd;
      }
    }
  }

  .content {
    width: 100%;
    min-height: 100%;
    padding: @layout1HeaderHeight 0 0 @layout1AsideWidth;
    margin: -@layout1HeaderHeight 0 0 0;
    .content-inner {
      min-height: 100%;
      padding: 0 24px 24px;
      border-left: 1px #ddd solid;
      background-color: #ecf0f5;
    }
  }
</style>
